<!--登录页-->
<template>
  <div class="loginMain">
    <div class="loginInfoLine">
      <div class="textInfo">用户名:</div>
      <el-input size="mini" v-model="form.username"></el-input>
      <i @click="clearLoginInput('user')" v-if="form.username"
         class="loginLineIcon el-icon-error"></i>
    </div>
    <div class="loginInfoLine">
      <div class="textInfo">密码:</div>
      <el-input size="mini" type="password" v-model="form.password"></el-input>
      <i @click="clearLoginInput('pwd')" v-if="form.password" class="loginLineIcon el-icon-error"></i>
    </div>
    <div class="loginInfoLine">
      <el-button @click="LoginFunc()">登录</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data: function () {
    return {
      form: {
        username: '',
        password: ''
      },
      checked: false,
      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      rules: {
        username: [
          {required: true, message: '账号不可为空', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密码不可为空', trigger: 'blur'}
        ]
      },
      dialogVisible: false,
      username: "",
      password: "",
      isShowsign: false,
    }
  },

  mounted() {
  },
  methods: {
    dialogResult(str) {
      console.log(str)

    },
    clearLoginInput(s) {
      console.log("s", s);
      if (s === "user") {
        this.form.username = ""
      } else if (s === "pwd") {
        this.form.password = ""
      }
    },
    LoginFunc() {
      console.log("登录");

      let md5 = require('md5');
      let loginData = {
        "user": this.form.username,
        "password": md5(this.form.password)
      };
      let rootThis = this;
      let webStorage = this.$webStorage;
      this.$axios("UserLogin", loginData, function (result) {
            console.log("登录成功", result);
            webStorage.sessionSet(webStorage.GetSessionUserKeyName(), rootThis.form.username);
            webStorage.sessionSet(webStorage.GetSessionAuthKeyName(), result.auth);
            webStorage.sessionSet(webStorage.GetSessionUserKeyNameID(), result.userid);
            webStorage.sessionSet(webStorage.GetSessionAuthStateKeyName(), true);
            rootThis.$router.push("/");
          },
          function (err) {
            console.log("err", err);
            rootThis.dialogVisible = true;

          },
          function (err) {
            console.log("其他错误", err);
            alert("登录失败拉拉")
          });
    },
    signUp() {
      this.$router.push("/signUp");
    },
  }
}
</script>

<style scoped>
.loginMain {
  /*position: relative;*/
  top: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, rgba(50, 104, 152, 1) 0%, rgba(83, 175, 255, 1) 100%);
}


.loginHardText {
  /*background-image: url("../assets/login/login_big.png");*/
  /*background-repeat: no-repeat;*/
  width: 600px;
  height: 90px;
  position: absolute;
  top: 5%;
  left: 4%;
  color: #FFFFFF;
  font-size: 32px;
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
  font-weight: 800;
  /*left: 8%;*/
}

.loginInfo {
  position: absolute;
  top: 35%;
  left: 35%;
}

.loginInfoRight {
  position: absolute;
  width: 40%;
  height: 100%;
  /* display: inline-block; */
  left: 65%;
}


.loginInfoLine {
  justify-content: center;
  display: flex;
  align-items: center;
}

.loginInfoLine > span:first-child {
  width: 166px;
  height: 28px;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  color: rgba(92, 184, 92, 0.984313725490196);
  text-align: left;
}


.loginInfoLine .loginLineIcon {
  position: absolute;
  right: -20px;
  font-size: 20px;
  color: #1ABC9C;

}

.loginInfoRight .el-button {
  width: 67px;
  height: 53px;
  font-family: '微软雅黑', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #214665;
  border-width: 0;
  position: absolute;
  top: 18%;
  left: 8%;
}

.loginInfoLine {
  height: 12%;
  width: 100%;
  /*border:1px solid red*/
}

.loginInfoLine .el-input {
  width: 215px;
  /*height: 30px;*/
  padding: 2px 2px 2px 2px;
  font-family: '微软雅黑 Regular', '微软雅黑', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  letter-spacing: normal;
  background-color: transparent;
  border-color: transparent;
}

.loginInfoLine > .textInfo {
  width: 76px;
  text-align: right;
  color: rgba(163, 227, 250, 0.98);
  padding-right: 10px;
}

.loginInfoLine > .el-checkbox {
  font-family: '微软雅黑', sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #A3E3FA;
}

</style>
